<template>
    <view class="container">
        <u-sticky>
            <view class="tabs">
                <u-tabs
                    :list="tabs"
                    :scrollable="false"
                    lineWidth="50rpx"
                    lineHeight="4rpx"
                    lineColor="#000000"
                    itemStyle="flex:1;height: 100rpx;border-bottom: 1rpx solid #D8D8D8;"
                    :activeStyle="{
                        color: '#000000',
                        fontSize: '28rpx'
                    }"
                    :inactiveStyle="{
                        color: '#666666',
                        fontSize: '28rpx'
                    }"
                    @click="tabClick"
                ></u-tabs>
            </view>
        </u-sticky>
            <view class="ul" v-show="tabAction=='extract'">
                <block v-if="tableData.length > 0">
                    <view class="item" v-for="(item, k) in tableData" :key="k">
                        <u-icon name="/static/icon_withdraw.png" size="50rpx"></u-icon>
                        <view class="info">
                            <view class="hash">
                                <view class="hash-text">
                                    {{item.toAddr}}
                                </view>
                                <view class="num">
                                    - {{item.number}}
                                </view>
                            </view>
                            <view class="time">
                                <view class="time-text">
                                    {{item.createAt}}
                                </view>
                                <view class="state-tag-disabled" v-if="item.state == 'complete'">已完成</view>
                                <view class="state-tag" v-if="item.state == 'confirm'">确认中</view>
                                <view class="state-tag" v-if="item.state == 'wait'">待审核</view>
                            </view>
                        </view>
                    </view>
                </block>
                <u-empty
                    mode="data"
                    width="400rpx"
                    height="400rpx"
                    icon="https://img.ionepin.com/dcfe6ae6d90104cbc50c50dd6010c1f8eabee5a3.png"
                    class="empty"
                    v-else
                >
                </u-empty>
            </view>
        <view class="ul" v-show="tabAction=='gift'">
            <view class="gift-item" v-for="(item, k) in giftData" :key="k">
                <u-icon name="https://img.ionepin.com/a9f02d19637759e1e0ed3a6908cbfb8fe8b7ee43.png" size="50rpx"></u-icon>
                <block v-if="item.toUserId !== uid">
                    <view class="gift-info">
                        <view class="gift-user">转赠-{{ item.to_user.mobile|getSpliceMobile }}</view>
                        <view class="gift-date">{{ item.createAt }}</view>
                    </view>
                    <view class="gift-number">-{{ item.number }}</view>
                </block>
                <block v-else>
                    <view class="gift-info">
                        <view class="gift-user">{{ item.from_user.nickName }} 转赠获取</view>
                        <view class="gift-date">{{ item.createAt }}</view>
                    </view>
                    <view class="gift-number">+ {{ item.number }}</view>
                </block>
            </view>
        </view>
    </view>
</template>
<script>
import { getWithdrawPage, giftRecord } from "@/config/api"
export default {
    data() {
        return {
            uid: this.$store.getters.userId,
            tableData: [],
            total: 0,
            giftData: [],
            giftTotal: 0,
            query: {
                page: 1,
                list_rows: 15,
                nftId: null
            },
            giftQuery: {
                page: 1,
                list_rows: 15,
                nftId: null
            },
            tabAction: "extract",
            tabs: [
                {
                    name: "提取",
                    type: "extract"
                },
                {
                    name: "核销",
                    type: "verify"
                },
                {
                    name: "转赠",
                    type: "gift"
                }
            ],
        }
    },
    filters: {
        getSpliceMobile(str) {
            if (!str) {
                return str
            }
            var sub1 = str.slice(0, 3)
            var sub2 = str.slice(-3)
            return sub1 + '****' +sub2
        },
    },
    onLoad(option) {
        this.query.nftId = option.nftId
        this.getData()
        this.giftQuery.nftId = option.nftId
        this.getGiftRecord()
    },
    onReachBottom() {
        if (this.tabAction == 'extract') {
            if (this.total > this.tableData.length) {
                this.query.page += 1
                this.getData(true)
            }
        } else if(this.tabAction == 'gift') {
            if (this.giftTotal > this.giftData.length) {
                this.giftQuery.page += 1
                this.getGiftRecord(true)
            }
        }
    },
    methods: {
        async getData(more = false) {
            const res = await getWithdrawPage(this.query)
            if (more) {
                this.tableData = [...this.tableData, ...res.items]
            } else {
                this.tableData = res.items
            }
            console.log(this.tableData)
            this.total = res.total
        },
        tabClick(item) {
            this.tabAction = item.type
        },
        async getGiftRecord(more = false) {
            const res = await giftRecord(this.giftQuery)
            this.giftTotal = res.total
            if (more) {
                this.giftData = [...this.giftData, ...res.items]
            } else {
                this.giftData = res.items
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        .tabs {
            background: #ffffff;
        }
        .ul {
            padding: 20rpx;
        }
        .item {
            margin-top: 60rpx;
            display: flex;
            align-items: flex-start;
            .info {
                flex: auto;
                margin-left: 14rpx;
                .hash {
                    display: flex;
                    justify-content: space-between;
                    .hash-text {
                        width: 400rpx;
                        word-wrap:break-word;
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #000000;
                    }
                    .num {
                        font-size: 26rpx;
                        font-family: PingFang-SC-Bold, PingFang-SC;
                        font-weight: bold;
                        color: #356CE7;
                    }
                }
                .time {
                    margin-top: 10rpx;
                    display: flex;
                    justify-content: space-between;
                    .time-text {
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #888888;
                    }
                    .state-tag-disabled {
                        font-size: 22rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                        padding: 5rpx 15rpx;
                        background: #EEEEEE;
                        border-radius: 2px;
                    }
                    .state-tag {
                        font-size: 22rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #356CE7;
                        padding: 5rpx 15rpx;
                        background: #F1F7FE;
                        border-radius: 2px;
                        border: 1px solid #356CE7;
                    }
                }
            }
        }
        .gift-item {
            display: flex;
            margin-top: 50rpx;
            .gift-info {
                flex: auto;
                margin-left: 14rpx;
                .gift-user {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    line-height: 1.5;
                }
                .gift-date {
                    margin-top: 5rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #888888;
                    line-height: 1.5;
                }
            }
            .gift-number {
                font-size: 26rpx;
                font-family: PingFang-SC-Bold, PingFang-SC;
                font-weight: bold;
                color: #47AAB5;
            }
        }
        .empty {
            padding: 50rpx 0;
        }
    }
</style>
